<template>
  <div id="container">
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:200px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <temp :node-list="selectItem.nodeList" :link-list="selectItem.linkList" :prj="prj"></temp>
        </div>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:550px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <div id="cesiumContainer">
            <div style="position: absolute;z-index:10;display: flex;flex-direction: column">
              <dv-border-box-13 backgroundColor="#19233Ddf" style="width: 300px;height: 450px;padding: 20px;">
                <div class="bg-color-black" >
                  <div class="d-flex jc-center body-box">
                    <div style="max-height: 430px;overflow-y: auto">
                      <dv-border-box-12 style="height: 50px;overflow-y: hidden" v-for="(item,index) in LNTY" :key="index" >
                        <div style="display: flex;flex-direction: row;padding-top: 10px;cursor: pointer" >
                          <div style="color: white;width: 280px;margin-left: 60px;display: flex;flex-direction: row;">
                            <div style="margin-top: 5px" @click="searchModle(item)">衬砌类型: {{item}}</div>
                          </div>
                        </div>
                      </dv-border-box-12>
                    </div>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-12>

  </div>

</template>

<script>
let viewer = null;
import axios from "axios";
import * as Cesium from "cesium/Cesium";
import drawTunnel from "../d3/drawTunnel";
import Util_Projection from "../d3/Util_Projection";
// import sub_dataview from "../sub_dataview";
import vkbeautify from "vkbeautify";
import x2js from "x2js";
// import profile_model from "../profile_model"
let x2jsObj = new x2js();
let baseUrl = "";
export default {
  props:["prj"],
  data() {
    return {
      defs:[],
      MILLdata: null,
      mileage:null,
      LNTY:[],
      entity:[],
      struction:["内轮廓","建筑限界","初衬","二衬"],
      pathArr:[],
      matchedInfo:{},
      selectFile:null,
      id : 0,
    };
  },
  /*
    页面初始化开始执行
  */
  created() {},
  /*
    界面初始化完毕执行
   */
  mounted() {
    this.initData();
    this.initScene();
    // this.fileClick();
  },
  methods: {
    searchModle(item){
      // if(viewer.entities.values.length>0){viewer.entities.removeAll();console.log("removed!")}

      console.log(item)
      let code = this.defs[1].code;
      let MILL = [];

      let p1=axios.get(`/api/prj/data?code=${this.prj}&objCode=SHOC`)
      let p2=axios.get(`/api/prj/data?code=${this.prj}&objCode=SECL`)
      let p3=axios.get(`/api/prj/data?code=${this.prj}&objCode=BOLT`)

      axios.all([p1,p2,p3]).then(axios.spread((p1, p2, p3) => {

        this.matchedInfo.LNTY=item

        var SHOC = p1.data;
        for (var i = 0; i < SHOC.length;i++ ) {
          if(SHOC[i].MILL_LNTY==item){
            this.matchedInfo.SHOC=SHOC[i]
            break
          }
        }
        var SECL = p2.data;
        for (var i = 0; i < SECL.length;i++ ) {
          if(SECL[i].MILL_LNTY==item){
            this.matchedInfo.SECL=SECL[i]
            break
          }
        }
        var BOLT = p3.data;
        for (var i = 0; i < BOLT.length;i++ ) {
          if(BOLT[i].MILL_LNTY==item){
            this.matchedInfo.BOLT=BOLT[i]
            break
          }
        }
        this.drawFile(this.matchedInfo);
          //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
        }))
      console.log(this.matchedInfo);


    },
    initData() {
      axios.get(baseUrl + '/api/prj/def?code=' + this.prj).then(res => {
        this.defs = res.data
        let code = "MILL"
        if ((this.defs)&&(this.defs.length>0)){
          console.log(this.defs)
        }
        axios.get(`/api/prj/data?code=${this.prj}&objCode=${code}`).then(res2 => {
          this.MILLdata = res2.data
          var hash=[];
          for (var i = 0; i < this.MILLdata.length;i++ ) {
              hash.push(this.MILLdata[i].MILL_LNTY)
            }
          for (var j = 0; j < hash.length; j++) {
            if(this.LNTY.indexOf(hash[j])==-1){
              this.LNTY.push(hash[j]);
            }
          }
          console.log(this.LNTY)
        })
        });
    },
    initScene() {
      let options = {
        animation:false,   //如果设置为false，则不会创建'动画'小部件。
        baseLayerPicker:false,   //如果设置为false，则不会创建BaseLayerPicker小部件
        fullscreenButton:false,  //如果设置为false，将不会创建FullscreenButton小部件。
        vrButton:false,     //如果设置为true，将创建VRButton小部件。
        geocoder:false,     //如果设置为false，则不会创建Geocoder小部件。
        homeButton:false,      //如果设置为false，将不会创建HomeButton小部件。 -----------
        infoBox:false,         //如果设置为false，则不会创建InfoBox小部件。
        sceneModePicker:false,      //
        timeline:false,
        navigationHelpButton:false,
        navigationInstructionsInitiallyVisible:false,  //如果导航说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
      };
      viewer = new Cesium.Viewer("cesiumContainer", options);

      //地表透明
      viewer.scene.globe.translucency.enabled = true;
      viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
        1000.0,
        0.0,
        5000.0,
        0.0
      );

      viewer._cesiumWidget._creditContainer.style.display = "none";
    },
    GML_Parser(data) {
        let selectFile = data;
        let xml_show = vkbeautify.xml(selectFile);
        let obj = x2jsObj.xml2js(xml_show);
        let detailShow = true;
        if (obj.LineString) {
          let data=obj.LineString.coordinates.__text
          let result = [];
          data = data.replace(/\r\n/g, "@");
          data = data.replace(/\n/g, "@");
          let list = data.split("@");
          list.forEach(one => {
            if (one.length > 0) {
              let sp = one.trim().split(" ");
              if (sp.length == 2) {
                result.push([sp[0],sp[1]]);
              }
            }
          });
          return result
        }
    },
    drawFile(def) {
      let file_path=[]
      let SECL_path=def.SECL.FILE_FSET
      let SHOC_path="关联文件\\面ID\\7-初喷混凝土SHOC\\SF5a.txt"
      file_path=[SHOC_path,SECL_path]
      for(let i=0;i<file_path.length;i++){
        console.log(file_path[i])
        axios.get(`static/data/${this.prj}/${file_path[i]}`).then(res => {
          let result=this.GML_Parser(res.data)
          console.log(result)
          let offset = {
            x: 11038980.4,
            y: 2918588,
            z: 1800
          };
          let path= [
            {
              'mileage': 'YK1+435',
              'x': '2172.972',
              'y': '-377.95',
              'z': '-7.45'
            },
            {
              'mileage': 'YK1+450',
              'x': '2159.2824',
              'y': '-371.8134',
              'z': '-7.32'
            },
          ]
          //建立模型
          path.forEach(one => {
            let lnglat = Util_Projection.webMercator2LngLat(
              offset.x + parseFloat(one.x),
              offset.y + parseFloat(one.y)
            );
            one.lng = lnglat[0];
            one.lat = lnglat[1];
            one.z = 0
            // parseFloat(one.z) ;
          });

          let h = parseInt(def.SHOC.SHOC_THIC)/1000+0.1
          console.log(this.id,h)
          if(this.id==0){
            var shape = { name: JSON.stringify(def.SHOC), outer: result };
            let model = new drawTunnel(this.id,viewer, [shape, [path,0,0,0]],"#4E4E4E");
            model.draw();
          }else if(this.id==1){
            var shape = { name: JSON.stringify(def.SECL), outer: result };
            let model = new drawTunnel(this.id,viewer, [shape, [path,0,0,h]],"#A6A6A6");
            model.draw();
            console.log("ok~~~")
          }

          // this.entity.push(viewer.entities.getById(this.id));
          viewer.flyTo(viewer.entities);
          this.id+=1;
          console.log(viewer.entities)
          });
          }
    },
  }
};

</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 530px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

</style>
